<template>
    <el-dialog title="售后详情" :visible.sync="viewDialogVisible" width="960px" :close-on-click-modal="false"
        append-to-body>
        <div class="form-box">
            <el-descriptions title="订单信息" :column="3" border
                :labelStyle="{ minWidth: '80px', width: '80px', textAlign: 'right' }"
                :contentStyle="{ minWidth: '100px', textAlign: 'left' }">
                <el-descriptions-item label="中介单号">{{ processForm.orderNo }}</el-descriptions-item>
                <el-descriptions-item label="售后单号">{{ processForm.afterNo }}</el-descriptions-item>
                <el-descriptions-item label="售后状态"><el-tag :type="afterStatusType(processForm.afterStatus)">{{
                    afterStatusText(processForm.afterStatus) }}</el-tag></el-descriptions-item>
                <el-descriptions-item label="游戏账号">{{ processForm.account }}</el-descriptions-item>
                <el-descriptions-item label="卖家昵称">{{ processForm.sellerNickname }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ processForm.createTime }}</el-descriptions-item>
                <!-- <el-descriptions-item label="处理时间">{{ processForm.updateTime || '--' }}</el-descriptions-item> -->
              
                <el-descriptions-item label="换绑截图">
                    <img-box :height="40" :img="orderInfos.bindingScreenshot"></img-box>
                </el-descriptions-item>
                <el-descriptions-item label="支付截图">
                    <img-box :height="40" :img="orderInfos.paymentScreenshot"></img-box>
                </el-descriptions-item>
                <el-descriptions-item label="放款截图">
                    <img-box :height="40" :img="orderInfos.loanScreenshot"></img-box>
                </el-descriptions-item>
                  <el-descriptions-item label="商品金额">
                    <span style="color:red">¥{{ formatMoney(orderInfos.productAmount) }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="包赔费">
                    <span style="color:red">¥{{ formatMoney(orderInfos.compensationFee) }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="手续费">
                    <span style="color:red">¥{{ formatMoney(orderInfos.serviceFee) }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="总金额">
                    <span style="color:red">¥{{ formatMoney(orderInfos.totalAmount) }}</span>
                </el-descriptions-item>

            </el-descriptions>
            <div style="height:20px"></div>
            <el-descriptions title="售后申请信息" :column="3" border
                :labelStyle="{ minWidth: '80px', width: '80px', textAlign: 'right' }"
                :contentStyle="{ minWidth: '100px', textAlign: 'left' }">
                <el-descriptions-item label="售后编号">{{ processForm.afterNo }}</el-descriptions-item>
                <el-descriptions-item label="申请人">{{ processForm.applicantName }}</el-descriptions-item>
                <el-descriptions-item label="申请时间">{{ processForm.createTime }}</el-descriptions-item>
                <el-descriptions-item label="买家">{{ processForm.buyerNickname }}</el-descriptions-item>
                <el-descriptions-item label="卖家">{{ processForm.sellerNickname }}</el-descriptions-item>

                <el-descriptions-item label="问题描述" :span="3">
                    <span style="white-space: pre;">{{ processForm.afterReason }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="图片附件" :span="3">
                    <div class="img-box flex">
                        <div v-for="(item, ind) in applicantImgArr" :key="item">
                            <img :src="item" @click="review(applicantImgArr, ind)" />
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>

            <div style="height:20px"></div>
            <el-descriptions v-if="guaranteeInfo && guaranteeInfo.name" title="包赔资料" :column="3" border
                :labelStyle="{ minWidth: '80px', width: '80px', textAlign: 'right' }"
                :contentStyle="{ minWidth: '100px', textAlign: 'left' }">
                <el-descriptions-item label="卖家姓名">{{ guaranteeInfo.name }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ guaranteeInfo.idCard }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ guaranteeInfo.phoneNumber }}</el-descriptions-item>
                <el-descriptions-item label="地址" :span="3">{{ guaranteeInfo.adress }}</el-descriptions-item>
                <!-- <el-descriptions-item label="卖家" v-if="orderInfo.backClueOrder">{{orderInfo.backClueOrder.sellerName}}</el-descriptions-item> -->
                <el-descriptions-item label="家庭人员" :span="3">
                    <span style="white-space: pre;">{{ guaranteeInfo.familyRemark }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="其他信息" :span="3">
                    <span style="white-space: pre;">{{ guaranteeInfo.otherRemark }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="图片" :span="3">
                    <div class="img-box flex">
                        <div v-for="(item, ind) in baopeiImgs" :key="item">
                            <img :src="item" @click="review(baopeiImgs, ind)" />
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <div style="height:20px"></div>
            <el-descriptions title="售后处理信息" :column="3" border
                :labelStyle="{ minWidth: '80px', width: '80px', textAlign: 'right' }"
                :contentStyle="{ minWidth: '100px', textAlign: 'left' }">
                <el-descriptions-item label="处理结果">
                    <span>
                        <el-tag :type="afterStatusType(processForm.afterStatus)">{{
                            afterStatusText(processForm.afterStatus) }}</el-tag>

                    </span>
                </el-descriptions-item>
                <el-descriptions-item label="赔付金额" v-if="processForm.afterStatus == 2"> <span style="color:red">¥{{
                    formatMoney(processForm.compensationAmount) }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="处理说明" >
                    <span style="white-space: pre;">{{ processForm.processingResult }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="处理时间" > {{ processForm.processTime }}
                </el-descriptions-item>
                <el-descriptions-item label="图片附件" :span="3">
                    <div class="img-box flex">
                        <div v-for="(item, ind) in afterImgArr" :key="ind">
                            <img :src="item" @click="review(afterImgArr, ind)" />
                        </div>
                    </div>
                </el-descriptions-item>
                
            </el-descriptions>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="viewDialogVisible = false">关 闭</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { orderInfo } from "@/api/interOrder/index";
export default {
    data() {
        return {
            viewDialogVisible: false,
            processForm: {},
            guaranteeInfo: {},
            applicantImgArr: [],
            baopeiImgs: [], //包赔信息的图片
            afterImgArr: [],
            orderInfos: {},
        }
    },
    methods: {
        async open(row) {
            this.afterImgArr = []
            this.viewDialogVisible = true
            const res = await orderInfo(row.orderId)
            this.orderInfos = res.data
            this.processForm = row

            if (row.afterScreenshot) {
                this.applicantImgArr = row.afterScreenshot.split(',')
            }
            if (row.processingScreenshot) {
               let res=   JSON.parse(row.processingScreenshot)
               res.forEach(item=> {
                this.afterImgArr.push(item.url)
               })
            }
            if (row.compensationMaterials) {
                this.guaranteeInfo = JSON.parse(row.compensationMaterials)
                let arr = [];
                if (this.guaranteeInfo.emblemIdcardImg) {
                    arr.push(this.guaranteeInfo.emblemIdcardImg);
                }
                if (this.guaranteeInfo.faceIdcardImg) {
                    arr.push(this.guaranteeInfo.faceIdcardImg);
                }
                if (this.guaranteeInfo.img) {
                    const arr2 = JSON.parse(this.guaranteeInfo.img);
                    if (arr2 && arr2.length) {
                        arr2.forEach((r) => {
                            if (r.url) {
                                arr.push(r.url);
                            }
                        });
                        arr = arr.concat(arr2);
                    }
                }
                this.baopeiImgs = arr;
            }
        },
        afterStatusText(val) {
            const map = { 1: '待处理', 2: '已同意', 3: '已拒绝' };
            return map[val] || '-';
        },
        afterStatusType(val) {
            switch (val) {
                case 1: return 'warning'; // 待处理
                case 2: return 'success'; // 已同意
                case 3: return 'danger';  // 已拒绝
                default: return 'info';
            }
        },
        formatMoney(n) {
            if (n === 0) return '0.00';
            if (!n) return '---';
            return Number(n).toFixed(2);
        },
        // 连续图片预览
        review(list, ind) {
            this.$viewerApi({
                images: list,
                options: {
                    initialViewIndex: ind,
                },
            });
        },
       
    }
}

</script>
<style scoped>
.img-box img {
    width: 100px;
    margin-left: 10px;
}
</style>